<template>
  <div>
    <!-- 卡片 -->
    <el-card class="box-card" style="margin-top: 15px">
      <el-form :model="query" label-width="80px" inline>
        <el-form-item label="手机号">
          <el-input
            size="mini"
            minlength="11"
            maxlength="11"
            oninput="value=value.replace(/[^\d]/g,'')"
            clearable
            placeholder="请输入手机号"
            v-model="query.userPhone"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="卡号">
          <el-input
            size="mini"
            clearable
            placeholder="请输入卡号"
            v-model="query.cardNumber"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            id="searchBtn"
            icon="el-icon-search"
            style="margin: 0 0 0 20px"
            @click="search"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 用户列表区 -->
      <el-table
        size="mini"
        :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }"
        id="tableTop"
        :data="Querydata"
        border
        stripe
      >
        <el-table-column label="姓名" prop="cardHolderName"></el-table-column>
        <el-table-column label="卡号" prop="cardHolderIdNumber"></el-table-column>
        <el-table-column label="会员ID" prop="id"></el-table-column>
        <el-table-column
          label="卡名称"
          prop="cardName"
        ></el-table-column>
        <el-table-column
          label="手机号"
          prop="cardHolderPhone"
        ></el-table-column>
        <el-table-column label="开卡日期" prop="openCardTime"></el-table-column>
        <el-table-column label="过期时间" prop="expireTime"></el-table-column>
        <el-table-column
          label="售卡部门"
          prop="orderCreateDeptName"
        ></el-table-column>
        <el-table-column label="售卡人" prop="orderCreateAdminName"></el-table-column>
        <el-table-column label="未执行次数" prop="stayExecuteCount"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            <p v-if="scope.row.status == 'effect'">正常生效</p>
            <p v-if="scope.row.status == 'withdraw'">退卡</p>
            <p v-if="scope.row.status == 'expire'">过期</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.cardSettionname != '体验会员'"
              @click="register(scope.row)"
              type="danger"
              size="mini"
              icon="el-icon-delete"
              >退卡</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
    >
    </el-pagination>
  </div>
</template>

<script>
import returnCard from "./returnCard.vue";
export default {
  components: {
    returnCard,
  },
  data() {
    return {
      //分页
      pageSize: 10,
      currentPage: 1,
      pageTotal: 0,

      // centerDialogVisible: false,
      fsadaf: {},
      Querydata: [],
      query: {
        userPhone: "",
        cardNumber: "",
        pageSize:10,
        pageNo:1,
      },
    };
  },

  methods: {
    //分页
    handleSizeChange(value) {
     this.query.pageSize = value
      this.etCustomerReturnCardByPhone();
    },
    handleCurrentChange(value) {
     this.query.pageNo = value
      this.etCustomerReturnCardByPhone();
    },
    search() {
     this.query.pageSize = 10
     this.query.pageNo = 1
      this.etCustomerReturnCardByPhone();
    },
    //退卡跳转路由
    register(row) {
      this.fsadaf = row;
      console.log(this.fsadaf);
      // this.$router.replace("/customer/refundCard");
      this.$router.push({
        name: "returnCard",
        params: {
          fsadaf: this.fsadaf,
        },
      });
    },

    //调用接口
    etCustomerReturnCardByPhone() {
      this.$axios
        .getUserCardList({
          userPhone: this.query.userPhone,
          cardNumber: this.query.cardNumber,
          pageSize: this.query.pageSize,
          pageNo: this.query.pageNo,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.Querydata = res.data.records;
            this.pageTotal = res.data.total;
            console.log(this.Querydata.tatle);
          }
        });
    },
  },
  mounted() {
    this.query.phone = this.$route.params.phone;
    this.etCustomerReturnCardByPhone();
  },
};
</script>
<style scoped>
#card-row {
  float: right;
}

.seachInput {
  line-height: 60px;
  width: 200px;
}

el-table-column {
  background-color: #f2f2f2;
}

#searchBtn {
  color: #fff;
}
</style>